<template>
	<view>
		<view class="head">
      <u--image :showLoading="true" src="/static/benefit/arrowLeft.png" width="45rpx" height="45rpx" @click="goback"></u--image>
			<view class="search">
				<u--input v-model="value" placeholder="请输入搜索内容" style="text-indent: 1.2em" border="none" :clearable="false" @confirm="init" focus/>
        <u--image :showLoading="true" src="/static/benefit/search.png"  class="search_img" width="40rpx" height="40rpx"></u--image>
			</view>
      <view @click="init" class="search_title">搜索</view>
		</view>
		<!-- search -->
		<view class="history" v-if="searchRecordList.length>0 || searchFlag">
			<view>大家都在搜</view>
			<view @click="del">
        <u--image :showLoading="true" src="/static/benefit/del.png" width="40rpx" height="40rpx"></u--image>
			</view>
		</view>
		<view class="history_search" v-if="searchRecordList.length>0 || searchFlag">
			<view class="box" v-for="item in searchRecordList" @click="record(item)">{{item}}</view>
		</view>
		<!-- search List -->
		<view class="list" v-if="searchList.length>0">
      <VideoCard  v-for="(i,k) in searchList" :key="k" :item="i"/>
		</view>
    <view style="margin-top: 100rpx;" v-if="searchList.length === 0 && searchFlag">
      <u-empty mode="list" text="暂无数据" textSize="20" iconSize="150"></u-empty>
    </view>

    <!-- 排名 -->
    <view class="ranking">
      <view class="ranking_L">推荐</view>
    </view>
    <view class="ranking_list">
      <VideoCard :view="false" v-for="(i,k) in recommendedList" :key="k" :item="i"/>
    </view>
	</view>
</template>
<script>
	import {Api} from "../../service/api";
  import {gotoPage} from "../../utils/common";
  import VideoCard from "../../components/videoCard.vue";

  export default {
    components: {VideoCard},
		data() {
			return {
				value: '',
				searchList: [],
        searchRecordList: [],
        recommendedList: [],
        searchFlag: false,
			}
		},
		onShow() {
      if(!uni.getStorageSync('searchRecordList')) uni.setStorageSync('searchRecordList',[])
      // 搜索记录
      this.searchRecordList = uni.getStorageSync('searchRecordList')
		},
    onLoad(){
      Api.getRecommendTv(1).then(res=>{
        this.recommendedList = res.data
      })
    },
		methods: {
      gotoPage,
      record(search){
        this.value = search
        this.init()
      },
      del(){
        this.searchRecordList = []
        uni.setStorageSync('searchRecordList',this.searchRecordList)
        this.searchList = []
        this.searchFlag = false
      },
			goback() {
        uni.navigateBack()
			},
			init() {
        if(this.value.trim().length === 0) return
        let flag = true
        this.searchRecordList.forEach(item=>{
          if(item === this.value) flag = false
        })
        if(flag) this.searchRecordList.push(this.value)
        uni.setStorageSync('searchRecordList',this.searchRecordList)
        this.searchFlag = true

        this.searchList = []
        Api.getAppTvPageList({
          pageNo: 1,
          pageSize: 100,
          tvName: this.value
        }).then(res=>{
          this.searchList = res.data.list
          this.value = ''
        })
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
		padding-top: 50px;
	}
</style>

<style lang="scss">
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		color: #000000;

		.search {
			width: 530rpx;
			height: 80rpx;
			//border: 1px solid #4a4f61;
			border-radius: 50rpx;
			padding: 0 20rpx;
      display: flex;
      position: relative;
      background-color: #F4F3F3;
      .search_img{
        position: absolute;
        top: 22rpx;
        left: 15rpx;
      }

      .search_title{
        font-size: 27rpx;
        width: 100rpx;
      }
		}
	}

	.list {
		width: 700rpx;
		margin: 30rpx auto 0;
		display: flex;
		flex-flow: wrap row;
    gap: 20rpx;
    padding: 0 20rpx;
	}

	.history {
		display: flex;
		width: 700rpx;
		margin: 30rpx auto;
		justify-content: space-between;
		font-size: 32rpx;
		color: #4B4A4A;
	}

	.history_search {
		width: 700rpx;
		margin: auto;
		display: flex;
		flex-flow: wrap row;
    gap: 20rpx;

		.box {
			padding: 6rpx 20rpx;
			background: #F4F3F3;
			border-radius: 20rpx;
			color: #A7A7A7;
		}
	}

  .ranking {
    width: 700rpx;
    margin: 60rpx auto 0;
    display: flex;
    color: #4B4A4A;
    font-size: 32rpx;
    font-weight: 700;
  }

	.ranking_list {
    width: 700rpx;
    margin: 15rpx auto 0;
    display: flex;
    flex-flow: wrap row;
    gap: 20rpx;
	}
</style>
